<template>
    <van-skeleton title :row="3" v-if="start"/>
    <div v-else>
        <van-nav-bar title="首页" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs v-model:active="active">
            <van-tab title="标签 1"></van-tab>
            <van-tab title="标签 2"></van-tab>
            <van-tab title="标签 3"></van-tab>
            <van-tab title="标签 4"></van-tab>
        </van-tabs>
        <van-search v-model="value" placeholder="请输入搜索关键词" @click="hun"/>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 100%;height: 200px;" />
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="4">
            <van-grid-item v-for="value in catitems" :icon="value.image_src" :text="value.name" />
        </van-grid>
        <van-grid :column-num="4">
            <van-grid-item v-for="value in catitems" :icon="value.image_src" :text="value.name" />
        </van-grid>
        <div class="wen">
            <p>新品 <b>上市</b>小米su7正式上线</p>
        </div>
        <div class="box">
            <h6>直播间</h6>
            <img src="../../image/1.png" alt="">
            <img src="../../image/1.png" alt="">
            <img src="../../image/1.png" alt="">
            <img src="../../image/1.png" alt="">
        </div>
    </div>
    <div>
        <div class="till">
            <h4>限时秒杀</h4>
            <div style="width: 100%;height: 150px;background: fuchsia;">
                <img src="../../image/2.png" alt="">
            </div>
            <div style="width: 100%;height: 150px;background: fuchsia;">
                    <img src="../../image/2.png" alt="">
            </div>
            <div style="width: 100%;height: 150px;background: fuchsia;">
                    <img src="../../image/2.png" alt="">
            </div>
            <div style="width: 100%;height: 150px;background: fuchsia;">
                    <img src="../../image/2.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
let start=ref(true)
setTimeout(()=>{
    start.value=false
},2000)
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
import { ref } from 'vue';
import { catitemsApi } from '@/api/api'
import { useRouter } from 'vue-router';
let router=useRouter()
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航数据', res);
    catitems.value = res.data.message
})
 let hun=()=>{
     router.push('/ss')
 }

</script>

<style lang="scss" scoped>
// .ols{
//     background: #ccc;
// }
.wen {
    width: 275px;
    height: 40px;
    //  border: 1px solid #000;
    h5 {
        margin-top: 10px;
    }

    p {
        color: orangered;
    }
}

.box {
    width: 270px;
    height: 90px;
    // border: 1px solid #000;

    h6 {
        margin-top: -20px;
    }

    img {
        width: 60px;
        height: 70px;
        margin-top: -20px;
        margin-left: 5px;
    }
}
.till{
    column-count: 2;
    column-gap: 20px;
    div{
        width: 100%;
        display: inline-block;
        margin-bottom: 20px;
        border: 1px solid #000;
    }
    img{
        width: 135px;
         height: 120px;
           border: 1px solid #000;
    }
}
</style>